﻿<script setup lang="ts" name="pageConfig">
import { colorArray } from '@/views/Plugins/Designer/Website/utils'
const emit = defineEmits(['propertyChange'])
const props = defineProps({
  pageConfig: { type: Object }
})
const pageOptions = toRef(props, 'pageConfig')
const pageSettings = ref({
  bgColor: '#ffffff',
  defaultHeader: false,
  defaultFooter: false,
  isDarkPage: false,
  isTopHeader: false
})
watch(
  () => props.pageConfig,
  (val) => {
    if (val.pageSettings) {
      console.log(val.pageSettings)
      pageSettings.value = val.pageSettings
    }
  },
  {
    immediate: true,
    deep: true
  }
)
watch(
  () => pageSettings.value,
  (val) => {
    emit('propertyChange', val)
  },
  {
    immediate: true,
    deep: true
  }
)
const activePageCollapse = ref(['common'])
</script>

<template>
  <div class="tab-content">
    <el-form class="config-form" label-width="auto" label-position="right">
      <el-collapse class="page-designer-collapse" v-model="activePageCollapse">
        <el-collapse-item name="common">
          <template #title>
            <h2 class="collapse-title">常见属性</h2>
          </template>
          <div class="config-form">
            <el-form-item label="背景色">
              <el-color-picker v-model="pageSettings.bgColor" show-alpha :predefine="colorArray()" />
            </el-form-item>
            <el-form-item label="独立页头" v-if="pageOptions.device !== 'app'">
              <el-switch v-model="pageSettings.defaultHeader" />
            </el-form-item>
            <el-form-item label="独立页脚" v-if="pageConfig.device !== 'app'">
              <el-switch v-model="pageSettings.defaultFooter" />
            </el-form-item>
            <el-form-item label="深色背景" v-if="pageConfig.device === 'app'">
              <el-switch v-model="pageSettings.isDarkPage" />
            </el-form-item>
            <el-form-item label="是否吸顶" v-if="pageConfig.device === 'app'">
              <el-switch v-model="pageSettings.isTopHeader" />
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<style scoped lang="scss"></style>
